<template>
  <div class="U000007-template1" style="position: relative; overflow: hidden;" :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="notice-box">
      <div class="icon-box" v-if="datas.is_showIcon">
        <i class="iconfont" v-if="!datas.icon_value || datas.icon_value.isIcon != 2" :class="[datas.icon_value && datas.icon_value.icon ? datas.icon_value.icon : 'icon-ht_btn_news']"></i>
        <img class="icon-img" v-if="datas.icon_value && datas.icon_value.isIcon == 2" :src="datas.icon_value.image" alt="" />
      </div>
      <template v-if="datas.is_scroll && datas.list.length > 0">
        <van-notice-bar :scrollable="false">
          <van-swipe vertical class="notice-swipe" :autoplay="datas.scroll_speed < 500 ? 500 : datas.scroll_speed" :show-indicators="false" :touchable="false">
            <van-swipe-item v-for="(item, index) in datas.list" :key="index">
              <div class="txt" style="position: relative;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" @click="toUrl(item)">
                {{ item.text }}
                <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" v-if="item.is_minApp == 2" @click.stop v-html="item.html"></div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </template>
      <!-- 没有滚动的时候固定的 -->
      <div class="scroll-notice" v-show="!datas.is_scroll || datas.list.length == 0" @click="toUrl(false)">
        {{ datas.list.length > 0 ? datas.list[0].text : "请填写内容,可设置是否滚动显示" }}
        <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" v-if="datas.list.length > 0 && datas.list[0].is_minApp == 2" @click.stop v-html="datas.list[0].html"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 自定义样式
const css = function() {
  const { preview_color, search_height, font_size, text_style, font_color, page_border, icon_value, is_showIcon } = this.datas;

  return `
        .component-${this.id} .notice-box {
            background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ""});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            font-size: ${font_size}px;
            font-weight: ${text_style.includes("1") ? "bold" : ""};
            font-style: ${text_style.includes("2") ? "italic" : ""};
            color: ${font_color};
            padding:0 ${page_border}px;
            height:${search_height}px;
            margin-top:-1px;
        }
        .component-${this.id} .notice-box .txt{
          color:${font_color};
          font-style: ${text_style.includes("2") ? "italic" : ""};
          height:${search_height}px;
          line-height:${search_height}px;
          text-align: left;
          width:${this.txtWidth}px;
        }
        .component-${this.id} .notice-box .notice-swipe{
          height:${search_height}px;
        }
        .component-${this.id} .icon-box{
            background-color: ${preview_color.isColor == 2 ? "transparent" : preview_color.color};
            height: ${search_height - 6}px;
            line-height: ${search_height - 6}px;
            left:${page_border > 0 ? page_border : "0"}px;
        }
        .component-${this.id} .notice-box .van-notice-bar{
          padding-left:${is_showIcon ? "2" : "0"}rem;
          height:${search_height}px;
        }
        .component-${this.id} .wrap, .component-${this.id} .scroll-notice{
          height: ${search_height}px;
          line-height: ${search_height}px;
          padding-left:${is_showIcon ? "2" : "0"}rem;
        }

        .component-${this.id} .notice-box, .component-${this.id} .scroll-notice{
            width: 100%;
        }
    `;
};

export default {
  props: ["id", "datas", "styles"],
  data() {
    return {
      timer: null,
      noticeWidth: "375",
      txtWidth:0,
    };
  },
  mounted() {
    if (this.fun.getPhoneEnv() == 3) {
      this.noticeWidth = "375";
    } else {
      this.noticeWidth = document.body.clientWidth;
    }
    this.txtWidth = this.noticeWidth - (this.datas.page_border * 2);
    // this.move();
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  watch: {
    datas: {
      deep: true, //深度监听
      handler: function() {
        // let copy = document.getElementById("copy"+this.id);
        // if(copy) {
        //   copy.innerText = this.datas.search_title; // 文字副本填充
        // }
      }
    }
  },

  methods: {
    toUrl(key) {
      if (!key) {
        console.log(this.datas.list[0]);
        // 没有滚动的点击默认第一张
        if (this.datas.list.length <= 0) return;
        if (this.fun.isTextEmpty(this.datas.list[0].h5_link)) {
          this.$toast("请设置跳转链接");
          return;
        }
        window.location.href = this.datas.list[0].h5_link;
        return;
      }
      if (this.fun.isTextEmpty(key.h5_link)) {
        this.$toast("请设置跳转链接");
        return;
      }
      window.location.href = key.h5_link;
    },
    addM(classArr, key) {
      return new Promise((resolve, reject) => {
        if (key == "width") {
          let width = 0;
          for (let index = 0; index < classArr.length; index++) {
            console.log(classArr[index].getBoundingClientRect().width);
            width += classArr[index].getBoundingClientRect().width;
          }
          resolve(width);
        } else {
          let height = 0;
          for (let index = 0; index < classArr.length; index++) {
            console.log(classArr[index].getBoundingClientRect().height);
            height += classArr[index].getBoundingClientRect().height;
          }
          resolve(height);
        }
      });
    },
    initTemplate() {
      for (let i = 0; i < this.datas.list.length; i++) {
        console.log(this.datas.list[i]);
        let script = document.createElement("script");
        script.type = "text/wxtag-template";
        script.text = `<div style="width: ${this.noticeWidth}px;height: ${this.datas.search_height}px;"></div>`;
        this.datas.list[i].datas.list[0] = `<wx-open-launch-weapp username="${this.datas.list[i].gh_id}" path="${this.datas.list[i].minApp_link}">${script.outerHTML}</wx-open-launch-weapp>`;
      }
    },
    async move() {
      this.initTemplate();
      // 获取文字text 的计算后宽度  （由于overflow的存在，直接获取不到，需要独立的node计算）
      if (!document.getElementById("node" + this.id)) {
        return;
      }
      let width;
      let box;
      let height;
      let distance = 0; // 位移距离
      let duration = "";
      // if(this.datas.scroll_speed) {
      //   if(this.datas.scroll_type == '2'){
      //     console.log(height,this.datas.scroll_speed)
      //     duration = (height / this.datas.scroll_speed);
      //   }else{
      //     console.log(width,this.datas.scroll_speed)
      //     duration = (width / this.datas.scroll_speed);
      //   }
      // }
      // clearInterval(this.timer);
      // this.timer = null;
      // if(this.datas.scroll_type == '2'){
      //   // this.timer = setInterval(()=> {
      //   //   distance = distance - 1;
      //   //   if (-distance >= height) {
      //   //     distance = 16;
      //   //   }
      //   //   box.style.transform = "translateY(" + distance + "px)";
      //   // }, duration*10 || 20);
      // }else{
      //   this.timer = setInterval(()=> {
      //     distance = distance - 1;
      //     // 如果位移超过文字宽度，则回到起点
      //     if (-distance >= width) {
      //       distance = 16;
      //     }
      //     box.style.transform = "translateX(" + distance + "px)";
      //   }, duration || 20);
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
// 默认
.component-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}

.scroll-notice {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  content: "...";
}

.icon-box {
  position: absolute;
  left: 0;
  top: 0;
  height: 39px;
  line-height: 39px;
  padding: 0 5px;
  // margin: 3px 0;
  background: #fff;
  z-index: 1;
  vertical-align: middle;
  display: flex;
  align-items: center;

  i {
    font-size: 20px;
  }

  .icon-img {
    width: 27px;
    height: 27px;
  }
}

// 限制外框宽度，隐藏多余的部分
.wrap {
  // white-space: nowrap;
  overflow: hidden;
  height: 45px; //设置此两行代码可以防止文字错位
  line-height: 45px;
}

// 移动框宽度设置
.box {
  // width: 80000%;
  display: flex;
}
.box2 {
  // padding-left: 2rem;
  text-align: left;
  line-height: 39px;
}

// 文字一行显示
.box div {
  float: left;
}

// 设置前后间隔
.marquee {
  /* min-width: 375px; */
  margin: 0 16px 0 0;
  text-align: left;
}

.copy {
  /* min-width: 375px; */
  text-align: left;
  position: relative;
}
.copy2 {
  position: relative;
}

// 获取宽度的节点，隐藏掉
.node {
  /* min-width: 375px; */
  position: absolute;
  z-index: -999;
  top: -999999px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.notice-box .van-notice-bar {
  padding: 0;
  background-color: transparent;
}
</style>
